<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.name" placeholder="运营商名称" style="width: 220px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="运营商名称">
        <template slot-scope="scope">
          <span>
              {{scope.row.nickName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="所属全国运营商">
        <template slot-scope="scope">
          <span>
              {{scope.row.nationalName}}
          </span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="所属区域">
        <template slot-scope="scope">
          <span>
              {{scope.row.provinceName+","+scope.row.cityName+","+scope.row.areaName}}
          </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="余额">
        <template slot-scope="scope">
          <span>{{ (scope.row.balance/100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="分成%">
        <template slot-scope="scope">
          <span>{{ scope.row.percentage }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | parseAgentState}}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  min-width="10%">
        <template slot-scope="scope">
            {{scope.row.nofield}}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />


  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as agentApi from '@/api/agent'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import guid from '@/utils/guid'


export default {
  name: 'AgentArea',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        name:'',
      },
      search:{
        name:'',
      },
      nationals:[]
    }
  },
  created(){
      var that=this;
      that.getList();
  },
  mounted(){

  },
  filters:{
    parseAgentState(val){
        return ['申请中','成功',''][val];
    }
  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      agentApi.getAreaList(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              item.nationalName='';
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;

            //获取全国运营商名称
            recursion(0);
         }
      })


        function recursion(index){
            if(index>=that.list.length){
               // that.$$forceUpdate();
                return;
            }
            var current=that.list[index];
             that.getNationals(current.id,current.upUserId,index,(nextidx)=>{
                recursion(nextidx);
            })
        }

    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.name=that.search.name.trim();
      that.getList();
    },
    getNationals(aid,upUserId,index,callback){
        var that=this;
        var idx=that.nationals.findIndex(item=>item.userId==upUserId);
        if(idx<0){
            agentApi.getNationalDetails({userid:upUserId}).then(res=>{
                if(res.data){
                    that.nationals.push(res.data);
                    var idx1=that.list.findIndex(item=>item.id==aid);
                    if(idx1>-1){
                        that.list[idx1].nationalName=res.data.nickName;
                    }
                    callback(++index);
                }
            })
        }else{
            var idx1=that.list.findIndex(item=>item.id==aid);
            if(idx1>-1){
                that.list[idx1].nationalName=that.nationals[idx].nickName;
            }
            callback(++index);
        }
    }
  }
}
</script>
